<template>
  <div class="dashboard-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>文件类型分布</span>
        </div>
      </template>
      
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>

<script setup>
/**
 * 项目仪表盘组件
 * 功能：展示项目文件类型的饼状图分布
 * 数据来源：开发环境使用mock数据，生产环境调用API
 */

// 组件props定义
const props = defineProps({
  id: {
    type: String,
    required: true
  }
})

// 从props获取项目ID
const projectId = props.id
console.log('当前项目ID:', projectId) // 调试输出
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getProjectFileStats } from '@/api/project'
import { mockGetProjectFileStats } from '@/api/mock/projectMock'

// 图表DOM引用和实例
const chartRef = ref(null)
let chartInstance = null

/**
 * 初始化ECharts图表
 * 1. 创建图表实例
 * 2. 调用更新图表数据
 */
const initChart = () => {
  chartInstance = echarts.init(chartRef.value)
  updateChart()
}

  /**
   * 更新图表数据
   * 1. 根据环境获取数据（开发环境用mock，生产环境用API）
   * 2. 统一处理数据格式
   * 3. 设置图表选项
   * 4. 错误处理：失败时显示空图表
   */
  const updateChart = async () => {
    console.log('开始加载图表数据，项目ID:', projectId)
    
    let chartData = []
    try {
      let responseData
      if (import.meta.env.DEV) {
        // 开发环境直接使用mock数据
        responseData = mockGetProjectFileStats(projectId).data
      } else {
        // 生产环境处理API返回
        const apiRes = await getProjectFileStats(projectId)
        // 统一处理API返回格式
        responseData = apiRes.data?.data || apiRes.data || []
      }
      
      console.log('获取到的数据:', responseData)
      
      // 统一处理数据格式
      chartData = Array.isArray(responseData) ? responseData : [responseData]
      chartData = chartData.map(item => ({
        value: item.value || 0,        // 文件数量，默认0
        name: item.name || '未知类型',  // 文件类型名称，默认"未知类型"
        projectId: item.projectId || projectId // 项目ID，默认使用当前项目ID
      }))
      
      console.log('最终图表数据:', chartData)
      chartInstance.setOption(getChartOption(chartData))
    } catch (error) {
      console.error('获取文件统计失败:', error)
      // 使用空数据防止图表报错
      chartInstance.setOption(getChartOption([]))
    }
  }

/**
 * 获取ECharts图表配置
 * @param {Array} data - 图表数据
 * @returns {Object} ECharts配置对象
 */
const getChartOption = (data) => {
  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '文件类型',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

onMounted(() => {
  console.log('Dashboard组件已加载')
  initChart()
})

// 添加窗口大小变化监听
window.addEventListener('resize', () => {
  if (chartInstance) {
    console.log('窗口大小变化，重新调整图表')
    chartInstance.resize()
  }
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>
